<template>
	<view class="delay-list upload-credential">
		<view class="base-info">
			<view class="uni-mb-5 delay-item" >
				<view class="uni-flex uni-row">
					<view class="text uni-flex left-logo">
						<image :src="airImageUrl" mode="widthFix"></image>
					</view>
					<view class="uni-flex uni-column right-info">
						<view class="uni-flex" style="justify-content: space-between;">
							<view class="text title" style="flex: 1;">
								{{data.flightNo}}
							</view>
							<view class="text uni-flex right-status">
								<text class="status" style="background-color:#0c6eb7" v-if="data.aOrD=='A'">进港</text>
								<text class="status" style="background-color:#FF9800" v-if="data.aOrD=='D'">出港</text>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="date">航班日期：{{data.flightDate}}</view>
							<view style="padding:0 5px;position: relative;top: 2px;margin-top: -5px;" @tap="toggleMoreInfo=!toggleMoreInfo"><uni-icons type="down" size="16" color="#999"></uni-icons></view>
						</view>

					</view>
				</view>
				<view v-if="toggleMoreInfo">
					<view class="uni-flex uni-row dest" style="margin-top: 5px;"
						v-if="data.planeNo&&data.originC&&data.destC">
						<view class="item" v-if="data.planeNo">
							<view class="val">{{data.planeNo}}</view>
							<text class="label">机号</text>
						</view>
						<view class="item" v-if="data.originC">
							<view class="val">{{data.originC}}</view>
							<text class="label">出发地</text>
						</view>
						<view class="item" v-if="data.destC">
							<view class="val">{{data.destC}}</view>
							<text class="label">目的地</text>
						</view>
					</view>
					<!-- <view class="uni-flex uni-row dest" v-if="data.dpTime&&data.deTime">
						<view class="item" v-if="data.dpTime">
							<view class="val">{{data.dpTime}}</view>
							<text class="label">计划起飞时间</text>
						</view>
						<view class="item" v-if="data.deTime">
							<view class="val">{{data.deTime}}</view>
							<text class="label">预计起飞时间</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="uni-pb-15">
			<view class="uni-common-mt" style="margin:0 10px;margin-top: 32rpx;">
				<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#0c6eb7"
					@clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-if="current === 'nonCash'">
					<uni-section title="授权书" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.authorization" :autoUpload="true"
								:uploadUrl="getUploadUrl('authorization')" :uploadCount="20"
								@successImage="successImage($event,0,'authorization')"
								@successDeleteImg="successDeleteImg($event,'authorization')" />
						</view>
					</uni-section>
					<uni-section title="确认单" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.confirmation" :autoUpload="true"
								:uploadUrl="getUploadUrl('confirmation')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,0,'confirmation')"
								@successDeleteImg="successDeleteImg($event,'confirmation')" />
						</view>
					</uni-section>
					<uni-section title="名单报" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.names" :autoUpload="true"
								:uploadUrl="getUploadUrl('names')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,0,'names')"
								@successDeleteImg="successDeleteImg($event,'names')" />
						</view>
					</uni-section>
					<uni-section title="身份证复印件" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.idCards" :autoUpload="true"
								:uploadUrl="getUploadUrl('idCards')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,0,'idCards')"
								@successDeleteImg="successDeleteImg($event,'idCards')" />
						</view>
					</uni-section>
					<uni-section title="黑屏" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.blackScreen" :autoUpload="true"
								:uploadUrl="getUploadUrl('blackScreen')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,0,'blackScreen')"
								@successDeleteImg="successDeleteImg($event,'blackScreen')" />
						</view>
					</uni-section>
					<uni-section title="付款凭据" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.payment" :autoUpload="true"
								:uploadUrl="getUploadUrl('payment')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,0,'payment')"
								@successDeleteImg="successDeleteImg($event,'payment')" />
						</view>
					</uni-section>
					<uni-section title="其他" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataNotCash.others" :autoUpload="true"
								:uploadUrl="getUploadUrl('')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,0,'others')"
								@successDeleteImg="successDeleteImg($event,'others')" />
						</view>
					</uni-section>
				</view>
				<view v-if="current === 'cash'">
					<uni-section title="授权书" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.authorization" :autoUpload="true"
								:uploadUrl="getUploadUrl('authorization')" :uploadCount="20"
								@successImage="successImage($event,1,'authorization')"
								@successDeleteImg="successDeleteImg($event,'authorization')" />
						</view>
					</uni-section>
					<uni-section title="确认单" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.confirmation" :autoUpload="true"
								:uploadUrl="getUploadUrl('confirmation')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,1,'confirmation')"
								@successDeleteImg="successDeleteImg($event,'confirmation')" />
						</view>
					</uni-section>
					<uni-section title="名单报" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.names" :autoUpload="true"
								:uploadUrl="getUploadUrl('names')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,1,'names')"
								@successDeleteImg="successDeleteImg($event,'names')" />
						</view>
					</uni-section>
					<uni-section title="身份证复印件" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.idCards" :autoUpload="true"
								:uploadUrl="getUploadUrl('idCards')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,1,'idCards')"
								@successDeleteImg="successDeleteImg($event,'idCards')" />
						</view>
					</uni-section>
					<uni-section title="黑屏" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.blackScreen" :autoUpload="true"
								:uploadUrl="getUploadUrl('blackScreen')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,1,'blackScreen')"
								@successDeleteImg="successDeleteImg($event,'blackScreen')" />
						</view>
					</uni-section>
					<uni-section title="付款凭据" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.payment" :autoUpload="true"
								:uploadUrl="getUploadUrl('payment')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,1,'payment')"
								@successDeleteImg="successDeleteImg($event,'payment')" />
						</view>
					</uni-section>
					<uni-section title="其他" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataCash.others" :autoUpload="true"
								:uploadUrl="getUploadUrl('')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,1,'others')"
								@successDeleteImg="successDeleteImg($event,'others')" />
						</view>
					</uni-section>
				</view>
				<view v-if="current === 'overSell'">
					<uni-section title="授权书" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.authorization" :autoUpload="true"
								:uploadUrl="getUploadUrl('authorization')" :uploadCount="20"
								@successImage="successImage($event,2,'authorization')"
								@successDeleteImg="successDeleteImg($event,'authorization')" />
						</view>
					</uni-section>
					<uni-section title="确认单" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.confirmation" :autoUpload="true"
								:uploadUrl="getUploadUrl('confirmation')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,2,'confirmation')"
								@successDeleteImg="successDeleteImg($event,'confirmation')" />
						</view>
					</uni-section>
					<uni-section title="名单报" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.names" :autoUpload="true"
								:uploadUrl="getUploadUrl('names')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,2,'names')"
								@successDeleteImg="successDeleteImg($event,'names')" />
						</view>
					</uni-section>
					<uni-section title="身份证复印件" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.idCards" :autoUpload="true"
								:uploadUrl="getUploadUrl('idCards')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,2,'idCards')"
								@successDeleteImg="successDeleteImg($event,'idCards')" />
						</view>
					</uni-section>
					<uni-section title="黑屏" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.blackScreen" :autoUpload="true"
								:uploadUrl="getUploadUrl('blackScreen')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,2,'blackScreen')"
								@successDeleteImg="successDeleteImg($event,'blackScreen')" />
						</view>
					</uni-section>
					<uni-section title="付款凭据" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.payment" :autoUpload="true"
								:uploadUrl="getUploadUrl('payment')"
								:deleteUrl="baseUrl+'sys/common/upload?token='+token" types="image" :uploadCount="20"
								@successImage="successImage($event,2,'payment')"
								@successDeleteImg="successDeleteImg($event,'payment')" />
						</view>
					</uni-section>
					<uni-section title="其他" type="line">
						<view class="example-body">
							<easy-upload class="easy-upload" :dataList="formDataOverbook.others" :autoUpload="true"
								:uploadUrl="getUploadUrl('')" :deleteUrl="baseUrl+'sys/common/upload?token='+token"
								types="image" :uploadCount="20" @successImage="successImage($event,2,'others')"
								@successDeleteImg="successDeleteImg($event,'others')" />
						</view>
					</uni-section>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configService from '@/common/service/config.service.js';
	export default {
		data() {
			return {
				upLoadImgUrl: configService.apiUrl + 'fd/image/add',
				deleteImgUrl: configService.apiUrl + 'fd/image/remove',
				url: {
					getFlightImage: '/flightImage/',
				},
				airImageUrl:'',
				token: '',
				data: {},
				toggleMoreInfo:false,
				items: ['非现金', '现金', '超售'],
				current: 'nonCash',
				dataList: [],
				formDataNotCash: {
					authorization: [],
					confirmation: [],
					names: [],
					idCards: [],
					blackScreen: [],
					payment: [],
					others: [],
				},
				formDataCash: {
					authorization: [],
					confirmation: [],
					names: [],
					idCards: [],
					blackScreen: [],
					payment: [],
					others: [],
				},
				formDataOverbook: {
					authorization: [],
					confirmation: [],
					names: [],
					idCards: [],
					blackScreen: [],
					payment: [],
					others: [],
				}

			}
		},
		onLoad(e) {
			this.token = uni.getStorageSync('token') || 'd057c74841e7460e81bed9388301d816'
			if (e.data) {
				this.data = JSON.parse(e.data);
				// console.log(e.data)
				if(this.data.airImage){
					this.getAirImage(this.data.airImage)
				}
				this.setImgUrl()
			}
		},


		methods: {
			setImgUrl() {
				// console.log(this.data.cashImageLst);
				if (this.data.nonCashImageLst.length) {
					this.formDataNotCash.authorization = this.data.nonCashImageLst.filter(image => image.type ===
						'authorization') || [];
					this.formDataNotCash.confirmation = this.data.nonCashImageLst.filter(image => image.type ===
						'confirmation') || [];
					this.formDataNotCash.names = this.data.nonCashImageLst.filter(image => image.type === 'names') || [];
					this.formDataNotCash.idCards = this.data.nonCashImageLst.filter(image => image.type === 'idCards') ||
				[];
					this.formDataNotCash.blackScreen = this.data.nonCashImageLst.filter(image => image.type ===
						'blackScreen') || [];
					this.formDataNotCash.payment = this.data.nonCashImageLst.filter(image => image.type === 'payment') ||
				[];
					this.formDataNotCash.others = this.data.nonCashImageLst.filter(image => image.type === '') || [];
				}
				if (this.data.cashImageLst.length) {
					this.formDataCash.authorization = this.data.cashImageLst.filter(image => image.type ===
						'authorization') || [];
					this.formDataCash.confirmation = this.data.cashImageLst.filter(image => image.type ===
						'confirmation') || [];
					this.formDataCash.names = this.data.cashImageLst.filter(image => image.type === 'names') || [];
					this.formDataCash.idCards = this.data.cashImageLst.filter(image => image.type === 'idCards') || [];
					this.formDataCash.blackScreen = this.data.cashImageLst.filter(image => image.type === 'blackScreen') ||
						[];
					this.formDataCash.payment = this.data.cashImageLst.filter(image => image.type === 'payment') || [];
					this.formDataCash.others = this.data.cashImageLst.filter(image => image.type === '') || [];
				}
				if (this.data.overSellImageLst.length) {
					this.formDataOverbook.authorization = this.data.overSellImageLst.filter(image => image.type ===
						'authorization') || [];
					this.formDataOverbook.confirmation = this.data.overSellImageLst.filter(image => image.type ===
						'confirmation') || [];
					this.formDataOverbook.names = this.data.overSellImageLst.filter(image => image.type === 'names') || [];
					this.formDataOverbook.idCards = this.data.overSellImageLst.filter(image => image.type === 'idCards') ||
						[];
					this.formDataOverbook.blackScreen = this.data.overSellImageLst.filter(image => image.type ===
						'blackScreen') || [];
					this.formDataOverbook.payment = this.data.overSellImageLst.filter(image => image.type === 'payment') ||
						[];
					this.formDataOverbook.others = this.data.overSellImageLst.filter(image => image.type === '') || [];
				}
				// console.log(this.formDataCash);
			},
			getUploadUrl(type) {
				return this.upLoadImgUrl + '?token=' + this.token + '&type=' + type + '&tab=' + this.current +
					'&flightId=' + this.data.flightId
			},
			getDeleteUrl(imageId) {
				return this.deleteImgUrl + '?token=' + this.token + '&tab=' + this.current + '&imageId=' + imageId +
					'&flightId=' + this.data.flightId
			},
			successImage(e, tabIdx, fieldName) {
				//debugger;
				console.log(e, JSON.parse(e.data), tabIdx, fieldName);
				// console.log(this.dataList);
				let uploadResult = JSON.parse(e.data)
				// console.log(uploadResult);
				if (uploadResult.errcode == 0) {
					if (uploadResult.data.tab == 'nonCash') {
						// console.log("nonCash")
						this.formDataNotCash[fieldName].push(uploadResult.data.images[0])
						// console.log(this.formDataNotCash[fieldName])
					} else if (uploadResult.data.tab == 'cash') {
						this.formDataCash[fieldName].push(uploadResult.data.images[0])
					} else if (uploadResult.data.tab == 'overSell') {
						this.formDataOverbook[fieldName].push(uploadResult.data.images[0])
					}
				} else {
					uni.showToast({
						title: uploadResult.errmsg,
						icon: "none"
					})
				}
			},
			successDeleteImg(imgId, type) {
				// console.log(22, imgId);

				this.$http.post(this.deleteImgUrl, {
					token: this.token,
					flightId: this.data.flightId,
					tab: this.current,
					imageId: imgId
				}).then(res => {
					// console.log(res)
					if (res.data.errcode == 0) {
						// me.newsList=res.data.result.records
						if (this.current == 'nonCash') {
							this.formDataNotCash[type] = this.formDataNotCash[type].filter(item => item.id != imgId)
						}else if (this.current == 'cash') {
							this.formDataCash[type] = this.formDataCash[type].filter(item => item.id != imgId)
						}else if (this.current == 'overSell') {
							this.formDataOverbook[type] = this.formDataOverbook[type].filter(item => item.id != imgId)
						}
						
						uni.showToast({
							title: '删除成功',
							icon: "success"
						})
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: "none"
						})
					}
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					if (e.currentIndex == 0) {
						this.current = 'nonCash'
					} else if (e.currentIndex == 1) {
						this.current = 'cash'
					} else if (e.currentIndex == 2) {
						this.current = 'overSell'
					}
				}
			},
			// 获取航司Logo图片
			getAirImage(url) {
				if(url&&url.length){
					let split = url.split('/')
					let flatN = split[split.length-1]
					let me = this
					uni.request({
						url: configService.apiUrl.replace(/\/m\//,'') + this.url.getFlightImage + flatN,
						responseType: "arraybuffer",
						success: async function(res){
							let datas = res.data
							//将arrayBuffer数据转换成base64格式即可显示 
							me.airImageUrl = `data:image/jpeg;base64,${uni.arrayBufferToBase64(datas)}` 
							// console.log(me.airImage);
							return me.airImageUrl
						},
					})
				}
				
			
			},
		}
	}
</script>

<style lang="scss">


</style>